<template>
  <div>
    <div class="login_bc">
      <div class="logo-form">
        <div class="form-item login_input">
          <div class="shadow-c">
            <div class="left ipt-img">
              <img src="../../../static/image/e_2.png" alt="">
            </div>
            <div class="ipt-box">
              <input type="text" v-model="mobile" placeholder="请输入手机号"/>
            </div>
            <div class="clear"></div>
          </div>
        </div>
        <div class="form-item">
          <div @click="getCode" :class="hasSend? 'has-send' : ''" class="right shadow-c get-code">
            {{ codeText }}
          </div>
          <div class="shadow-c auth-code">
            <div class="left ipt-img">
              <img src="../../../static/image/e_8.png">
            </div>
            <div class="ipt-box">
              <input type="text" v-model="code" placeholder="请输入验证码"/>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="form-item agreen-box">
          <input @click="agree = !agree" type="checkbox">
          <span class="ready">我已阅读并同意</span>
          <span @click="getAgreement" class="agreenment">《用户协议》</span>
        </div>
        <div @click="bind" class="form-item logo-btn">
          绑定
        </div>
      </div>
    </div>
    <div v-show="lookAgreement" class="cover">
      <div class="agreenment-box">
        <div class="agreenment-bg">
          <h3>
            《平行车用户协议书》
          </h3>
          <div class="content" v-html="agreeContent">
          </div>
          <div class="cancel">
            <img @click="lookAgreement = false" src="../../../static/image/cuowu.png">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LoginByPass',
    data () {
      return {
        id: '',
        lookAgreement: false,
        hasSend: false,
        codeText: '获取验证码',
        agree: false,
        mobile: '',
        code: '',
        agreeContent: ''
      }
    },
    methods: {
      // 获取验证码
      getCode: function () {
        let that = this
        let mobile = that.mobile
        if (mobile === '') {
          that.$vux.toast.show({
            text: '请输入手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.isMobile(mobile)) {
          that.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (that.hasSend) {
          return false
        }
        that.$chaos.ajax({
          loading: '发送中...',
          url: 'Index/sendBindingCode',
          data: {
            mobile: mobile
          },
          callback: function (type) {
            if (type === 'success') {
              that.codeText = '60s后重发'
              that.hasSend = true
              let timer = 60
              let text = 's后重发'
              let intval = setInterval(function () {
                timer--
                if (timer <= 0) {
                  that.codeText = '重新发送'
                  that.hasSend = false
                  clearInterval(intval)
                } else {
                  if (timer < 10) {
                    that.codeText = '0' + timer + text
                  } else {
                    that.codeText = timer + text
                  }
                }
              }, 1000)
            }
          }
        })
      },
      // 绑定
      bind: function () {
        let that = this
        let code = that.code
        let mobile = that.mobile
        let id = decodeURI(that.$chaos.getQueryString('id'))
        if (mobile === '') {
          that.$vux.toast.show({
            text: '请输入手机号码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.isMobile(mobile)) {
          that.$vux.toast.show({
            text: '手机号有误',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (code === '') {
          that.$vux.toast.show({
            text: '请输入验证码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (!that.agree) {
          that.$vux.toast.show({
            text: '请勾选同意用户协议',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        that.$chaos.ajax({
          loading: '绑定中...',
          url: '/Index/mobileBinding',
          data: {
            mobile: mobile,
            code: code,
            id: id
          },
          callback: function (type, res) {
            if (type === 'success') {
              that.$chaos.setAccessToken(res.result.access_token)
              if (res.result.type === '绑定') {
                that.$router.push('/?froml=true')
                return false
              } else if (res.result.type === '注册') {
                that.$router.push('/Personal/PersonalEditor?froml=true')
              }
            }
          }
        })
      },
      // 获取用户协议
      getAgreement: function () {
        let that = this
        that.$chaos.ajax({
          url: '/Index/getLoginAgreement',
          callback: function (type, res) {
            if (type === 'success') {
              that.agreeContent = res.result.content
              that.lookAgreement = true
            }
          }
        })
      }
    },
    created () {
      this.id = decodeURI(this.$chaos.getQueryString('id'))
      this.$emit('changeTitle', '绑定')
    }
  }
</script>

<style scoped>

</style>
